class KVue{
    constructor(options){
        this.$options = options;
        this._data = options.data;
        this.observe(this._data);
        this.compile();
    }

    // observer-proxy
    observe(data){
        let temp = {};
        this._data = new Proxy(data, {
            get(target, key){
                console.log('get');
                temp[key] = new Dep();
                if(Dep.target){
                    temp[key].addDep(Dep.target);
                }
                return Reflect.get(target, key);
            },
            set(target, key, newValue){
                console.log('set');
                temp[key] && temp[key].notify(newValue);
                return Reflect.set(target, key, newValue);
            }
        })
    }

    // observe-defineProperty
    // observe(data){
    //     // const _this = this;
    //     let keys = Object.keys(data);
    //     keys.forEach(key => {
    //         let value = data[key];
    //         let sub = new Dep();
    //         Object.defineProperty(data, key, {
    //             configurable: true,
    //             enumerable: true,
    //             get(){
    //                 console.log('get');
    //                 Dep.target && sub.addDep(Dep.target);
    //                 return value;
    //             },
    //             set(newValue){
    //                 console.log('set');
    //                 // 触发事件
    //                 // _this.dispatchEvent(new CustomEvent(key, {
    //                 //     detail: newValue
    //                 // }));

    //                 sub.notify(newValue);

    //                 value = newValue;
    //             }
    //         })
    //     });
    // }
    compile(){
        let ele = document.querySelector(this.$options.el);
        this.compileNodes(ele);
    }
    compileNodes(ele){
        let childNodes = ele.childNodes;
        childNodes.forEach(node => {
            if(node.nodeType === 1){
                // 元素节点0
                if(node.childNodes.length > 0){
                    this.compileNodes(node);
                }

                
                let attrs = node.attributes;
                [...attrs].forEach(attr => {
                    const { name, value } = attr;
                    // v-model 处理
                    if(name === 'v-model'){
                        node.value = this._data[value];
                        node.addEventListener('input', (e) => {
                            console.log(e);
                            const newValue = e.target.value;
                            this._data[value] = newValue;
                        })
                    }
                    // v-text 处理
                    if(name === 'v-text'){
                        node.innerText = this._data[value];
                        this.initWatcher(this._data, value, node);
                    }
                });
            }else{
                // 文本节点
                let reg = /\{\{\s*([^{}\s]+)\s*\}\}/g;
                let textContent = node.textContent;
                if(reg.test(textContent)){
                    let $1 = RegExp.$1;
                    node.textContent = node.textContent.replace(reg, this._data[$1]);

                    //事件监听
                    // this.addEventListener($1, (e) => {
                    //     console.log('视图更新',e);
                    //     let oldValue = this._data[$1];
                    //     let newValue = e.detail;
                    //     node.textContent = node.textContent.replace(oldValue, newValue);
                    // });

                    new Watcher(this._data, $1, (newValue) => {
                        console.log('视图更新！');
                        let oldValue = this._data[$1];
                        node.textContent = node.textContent.replace(oldValue, newValue);
                    });
                }
            }
        })
    }
    initWatcher(data, key, node){
        new Watcher(data, key, (newValue) => {
            console.log('视图更新！');
            let oldValue = data[key];
            node.textContent = node.textContent.replace(oldValue, newValue);
        });
    }
}

class Dep{
    constructor(){
        this.subs = [];
    }

    addDep(sub){
        this.subs.push(sub);
    }

    notify(value){
        this.subs.forEach(sub => {
            sub.update && sub.update(value);
        })
    }
}

class Watcher{
    constructor(data, key, cb){
        Dep.target = this;
        data[key]; // 触发get 收集watcher
        this.cb = cb;
        // Dep.target = null;
    }

    update(value){
        this.cb(value);
    }
}

